<template>
	<view class="password-change-container">
		<!-- 背景装饰 -->
		<view class="decorative-background"></view>

		<!-- 主体卡片 -->
		<view class="main-card">
			<!-- 标题区 -->
			<view class="header-section">
				<u-icon name="lock-open" size="48" color="#2979ff"></u-icon>
				<text class="section-title">安全密码修改</text>
			</view>

			<!-- 表单区 -->
			<u-form :model="formData" :rules="validationRules" ref="formRef" labelWidth="0" class="password-form">
				<!-- 原密码 -->
				<u-form-item prop="currentPassword">
					<u-input
						v-model="formData.currentPassword"
						placeholder="请输入当前密码"
						:password="!showCurrentPassword"
						prefixIcon="lock"
						prefixIconStyle="color: #909399;"
						shape="circle"
					>
						<template #suffix>
							<u-icon :name="showCurrentPassword ? 'eye-fill' : 'eye-off'" @click="togglePasswordVisibility('current')" color="#666" />
						</template>
					</u-input>
				</u-form-item>

				<!-- 新密码 -->
				<u-form-item prop="newPassword">
					<u-input
						v-model="formData.newPassword"
						placeholder="8-16位（字母+数字+特殊字符）"
						:password="!showNewPassword"
						prefixIcon="lock"
						prefixIconStyle="color: #909399;"
						shape="circle"
					>
						<template #suffix>
							<u-icon :name="showNewPassword ? 'eye-fill' : 'eye-off'" @click="togglePasswordVisibility('new')" color="#666" />
						</template>
					</u-input>
					<password-strength-indicator :password="formData.newPassword" />
				</u-form-item>

				<!-- 确认密码 -->
				<u-form-item prop="confirmPassword">
					<u-input
						v-model="formData.confirmPassword"
						placeholder="请再次输入新密码"
						:password="!showConfirmPassword"
						prefixIcon="lock"
						prefixIconStyle="color: #909399;"
						shape="circle"
					>
						<template #suffix>
							<u-icon :name="showConfirmPassword ? 'eye-fill' : 'eye-off'" @click="togglePasswordVisibility('confirm')" color="#666" />
						</template>
					</u-input>
				</u-form-item>

				<!-- 操作按钮 -->
				<u-button
					type="primary"
					shape="circle"
					:loading="isSubmitting"
					@click="handleSubmit"
					customStyle="margin-top: 40rpx;height: 100rpx;font-size: 36rpx;"
					ripple
				>
					{{ isSubmitting ? '提交中...' : '确认修改' }}
				</u-button>
			</u-form>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import PasswordStrengthIndicator from '@/components/PasswordStrengthIndicator.vue';
import httpUrl from '@/config';

const formRef = ref(null);
const isSubmitting = ref(false);

// 密码可见状态
const visibilityStates = reactive({
	current: false,
	new: false,
	confirm: false,
});

// 表单数据
const formData = reactive({
	currentPassword: '',
	newPassword: '',
	confirmPassword: '',
});

// 验证规则
const validationRules = {
	currentPassword: [
		{ required: true, message: '请输入当前密码', trigger: 'blur' },
		{ min: 6, max: 16, message: '长度6-16位', trigger: 'blur' },
	],
	newPassword: [
		{ required: true, message: '请输入新密码', trigger: 'blur' },
		{
			validator: (_, value) => /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,16}$/.test(value),
			message: '需包含大小写字母、数字和特殊字符',
			trigger: 'blur',
		},
	],
	confirmPassword: [
		{ required: true, message: '请确认新密码', trigger: 'blur' },
		{
			validator: (_, value) => value === formData.newPassword,
			message: '两次输入密码不一致',
			trigger: 'blur',
		},
	],
};

// 切换密码可见性
const togglePasswordVisibility = (type) => {
	visibilityStates[type] = !visibilityStates[type];
};

// 提交处理
const handleSubmit = () => {
	try {
		// 表单验证
		formRef.value.validate();

		isSubmitting.value = true;
		// 模拟API请求
		///system/user/update-password
		const tenantId = uni.getStorageSync('tenantId');
		const accessToken = uni.getStorageSync('accessToken');
		///system/user/profile/update-password
		uni.request({
			url: httpUrl.baseUrl + '/system/user/profile/update-password',
			method: 'PUT',
			header: {
				'Tenant-Id': tenantId,
				Authorization: `Bearer ${accessToken}`,
				'Content-Type': 'application/json',
			},
			data: {
				oldPassword: formData.currentPassword,
				newPassword: formData.newPassword,
			},
			success: (res) => {
				if (res.data.code === 0 && res.data.data) {
					console.log(res.data);
					uni.showToast({
						title: '密码修改成功',
						icon: 'success',
						duration: 1500,
					});
					uni.navigateTo({
						url: '/src/pages/index/index',
					});
				} else {
					console.error('请求失败1:', err);
				}
			},
			fail: (err) => {
				console.error('请求失败2:', err);
			},
		});

		// 重置表单
		Object.keys(formData).forEach((key) => (formData[key] = ''));
	} catch (error) {
		uni.showToast({
			title: error.message || '操作失败',
			icon: 'none',
			duration: 2000,
		});
	} finally {
		isSubmitting.value = false;
	}
};
</script>

<style lang="scss" scoped>
.password-change-container {
	height: 100vh;
	background: #f8f9fa;
	position: relative;

	.decorative-background {
		height: 400rpx;
		background: linear-gradient(135deg, #2979ff 0%, #00bcd4 100%);
		border-radius: 0 0 40% 40%;
		transform: rotate(-3deg);
		position: absolute;
		top: -100rpx;
		left: -10%;
		right: -10%;
	}

	.main-card {
		position: relative;
		margin: 200rpx 40rpx 0;
		background: #ffffff;
		border-radius: 32rpx;
		padding: 60rpx 40rpx;
		box-shadow: 0 20rpx 60rpx rgba(41, 121, 255, 0.15);

		.header-section {
			display: flex;
			align-items: center;
			margin-bottom: 60rpx;

			.section-title {
				font-size: 44rpx;
				font-weight: 600;
				color: #303133;
				margin-left: 20rpx;
			}
		}

		.password-form {
			:deep(.u-form-item) {
				margin-bottom: 40rpx;
				background: #f8f9fa;
				border-radius: 50rpx;
				padding: 20rpx 30rpx;
				transition: all 0.3s;

				&:hover {
					transform: translateY(-3rpx);
					box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
				}
			}
		}
	}
}

// 自定义按钮样式
.u-button--primary {
	background: linear-gradient(45deg, #2979ff, #00bcd4) !important;
	letter-spacing: 2rpx;
	transition: all 0.3s;

	&:active {
		transform: scale(0.96);
		opacity: 0.9;
	}
}
</style>
